<template>
  <el-dialog
    v-el-drag-dialog
    :title="dataForm.activityId===0?'活动整点列表':'活动整点列表'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <!-- <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column> -->
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="活动整点ID">
        </el-table-column>
        <el-table-column
          prop="activiteTime"
          header-align="center"
          align="center"
          label="活动时间">
        </el-table-column>
        <el-table-column
          prop="beginTime"
          header-align="center"
          align="center"
          label="活动每日开始时间">
        </el-table-column>
        <el-table-column
          prop="endTime"
          header-align="center"
          align="center"
          label="活动每日结束时间">
        </el-table-column>
        <el-table-column
          prop="goodsCount"
          header-align="center"
          align="center"
          label="活动商品数量">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsCount == null">0</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="forward(scope.row.id,scope.row.state)">设置商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <div v-show="!isShow" >
        <goods ref="Goods"></goods>
        <el-button @click="isShow=true" type="primary" round icon="el-icon-arrow-left">返回活动管理</el-button>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定1</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import Goods from './goods1'
  export default {
    data () {
      return {
        startTime: '',
        endTime: '',
        visible: false,
        isShow: true,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        dataForm: {
          activityId: 0
        },
        dataRule: {
          activityTitle: [
            { required: true, message: '活动标题不能为空', trigger: 'blur' }
          ],
          time: [
            { required: true, message: '时间不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      Goods
    },
    methods: {
      init (id) {
        this.dataList.activityId = 0
        this.dataForm.activityId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.activityId) {
            this.$http({
              url: this.$http.adornUrl(`/activity/spike/getWholePointActivitiesTime`),
              method: 'get',
              params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'keywords': this.dataForm.activityId
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataList = data.data.list
                this.totalPage = data.data.totalCount
              } else {
                this.dataList = []
                this.totalPage = 0
              }
              this.dataListLoading = false
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/activity/spike/${!this.dataForm.activityId ? 'add' : 'modify'}`),
              method: 'post',
              data: this.$http.adornData({
                'activityId': this.dataForm.activityId || undefined,
                'activityNo': this.dataForm.activityNo,
                'activityTitle': this.dataForm.activityTitle,
                'beginTime': this.dataForm.time[0],
                'endTime': this.dataForm.time[1],
                'publishRemark': this.dataForm.publishRemark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      forward (id, state) {
        localStorage.setItem('spikeActivityId', id)
        localStorage.setItem('activityState', state)
        this.isShow = false
        this.$nextTick(() => {
          this.$refs.Goods.init(id)
        })
      }
    }
  }
</script>
